<template>
	<view>
		<htmlHead :indexdata="indexdata"></htmlHead>
		<view class="bodyt2">
			<view class="bodyt2-1">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<i class="el-icon-location-outline" style="float: inline-start;font-size: 20px;">当前位置:</i>
				  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				  <el-breadcrumb-item>协会概况</el-breadcrumb-item>
				  <el-breadcrumb-item>{{temptilet}}</el-breadcrumb-item>
				</el-breadcrumb>
			</view>
			<view class="bodyt2-2">
				<view class="bodyt2-2-1">
					<view class="bodyt2-2-1-1">
						<view class="zcfglist">
							<p @click="xhgkgo('xhjj')"><i class="el-icon-caret-right"></i>协会简介</p>
							<p @click="xhgkgo('zzjg')"><i class="el-icon-caret-right"></i>组织机构</p>
							<p @click="xhgkgo('xhzc')"><i class="el-icon-caret-right"></i>协会章程</p>
							<p @click="xhgkgo('lsyg')"><i class="el-icon-caret-right"></i>历史沿革</p>
							<p @click="xhgkgo('ldgh')"><i class="el-icon-caret-right"></i>领导关怀</p>
						</view>
					</view>
				</view>
				<view class="bodyt2-2-2">
					<view class="bodyt2-2-2-1" style="font-size: 20px;align-content: center;justify-content: center;align-items: center;">
						<span style="color: #ba1c1b;font-size: x-large;position: relative;left: 10px;">{{temptilet}}</span>
					</view>
					<view class="bodyt2-2-2-2">
						<uParse style="word-break:break-all" :content="editor" @preview="preview" @navigate="navigate"/>
					</view>
				</view>
			</view>
		</view>
		<htmlFoot></htmlFoot>
	</view>
</template>
<script>
	import htmlHead from "@/components/html/html-head.vue";
	import htmlFoot from "@/components/html/html-foot.vue";
	import uParse from "@/components/feng-parse/parse.vue"
	var vk = uni.vk;
	export default {
		components: {
			htmlHead,
			htmlFoot,
			uParse
		},
		data() {
			// 页面数据变量
			return {
				xhgkid :'664e9405f08210b07d294acc',
				zzjgid :'664e98c821821b6d2b34b70c',
				xhzcid :'664e998fbd022087dfc25b49',
				lsygid :'664e99e609664cbba094e6ac',
				ldghid :'664e9b3e8b0da4a4e45b6a71',
				editor:'',
				indexdata:0,
				temptilet:'',
				activeName: 'first',
				options:{},
				listCont:0,
				listtemp:[],
				pageData: [],
				xwzxList:[]
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		async onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			//console.log(this.options.tempdata)
			//this.pdtemptilet()
			this.xhgkgo(this.options.tempdata)
		},
		// 函数
		methods: {
			xhgkgo(tempd){
				if(tempd == 'xhjj'){
					this.temptilet = '协会简介';
					this.getNewsById(this.xhgkid)
				}else if(tempd == 'zzjg'){
					this.temptilet = '组织机构';
					this.getNewsById(this.zzjgid)
				}else if(tempd == 'xhzc'){
					this.temptilet = '协会章程';
					this.getNewsById(this.xhzcid)
				}else if(tempd == 'lsyg'){
					this.temptilet = '历史沿革';
					this.getNewsById(this.lsygid)
				}else if(tempd == 'ldgh'){
					this.temptilet = '领导关怀';
					this.getNewsById(this.ldghid)
				}
			},
			getNewsById(id){
				return vk.callFunction({
				  url: 'client/hymbjy/pub/news.getNewsById',
				  data:{
				    tempid:id
				  }
				}).then((data) => {
				  this.editor = data.info.editor
				}).catch((err) => {
				  
				});
			},

			preview(src, e) {

			  // console.log(src)
			  // console.log('1==========')
			  // console.log(e)
			},
			navigate(href, e) {
				this.downloadFile(href,'unknown.file')
			},
			downloadFile(url, filename = 'unknown.file') {  
				// 使用方法：  
				//downloadFile('path/to/your/file.pdf', 'myfile.pdf');
			    const a = document.createElement('a');  
			    a.href = url;  
			    a.download = filename;  
			    a.style.display = 'none';  
			    document.body.appendChild(a);  
			    a.click();  
			    document.body.removeChild(a);  
			},
			pdtemptilet(){
				if(this.options.tempdata == 'xhjj'){
					this.temptilet = '协会简介';
					this.getNewsById(this.xhgkid)
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	
	.bodyt2 {
		margin: auto;
		background-color: #f5f5f5;
		width: 2000px;
		min-height: 640px;
		// height: 100%;
		display: flex;
		flex-direction: column;
		align-content: center;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
	}
	.bodyt2-1{
		margin: auto;
		width: 1200px;
		height: 80px;
		display: flex;  
		  //justify-content: center; /* 水平居中 */
		  align-items: center; /* 垂直居中 */  
	}
	.bodyt2-2{
		width: 1200px;
		min-height: 560px;
		position: relative;
		    display: flex;
		    flex-direction: row;
		    flex-wrap: nowrap;
		    align-content: flex-start;
		    justify-content: flex-start;
		    align-items: flex-start;
	}
	.bodyt2-3{
		margin: auto;
		width: 1000px;
		height: 20px;
		background-color: coral;
	}
	.el-breadcrumb {
	    font-size: 18px;
	    line-height: 1;
	}
	
	.bodyt2-2-1{
		width: 240px;
		height: 560px;
	}
	
	.bodyt2-2-1-1{
		width: 240px;
		height: 300px;
		background-color: #e6e6e6;
		
		border-top: 5px solid #9f9f9f;
	}
	.bodyt2-2-1-2{
		width: 240px;
		height: 280px;
		margin-top: 5px;
		border: 1px solid #e6e6e6;
	}
	.bodyt2-2-2{
		width: 960px;
		min-height: 560px;
		margin-left: 40px;
	}
	.bodyt2-2-2-1{
		width: 960px;
		height: 40px;
		border-left: 5px solid #ba1c1b;
	}
	.bodyt2-2-2-2{
		width: 960px;
		min-height: 520px;
	}
	.bodyt2-2-2-3{
		width: 960px;
		height: 50px;
	}
	.zcfglist{
    width: 200px;
    height: 300px;
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	}
	.zcfglist p{
		cursor: pointer;
		border-bottom: 1px solid #9f9f9f;
		margin: 10px 10px;
		font-weight: 600;
		font-size: 20px;
		line-height: 2.0;
	}
	.xwzxList{
		line-height: 2.0;
		margin: 0px 20px;
		cursor: pointer;
	}
	.xwzxList:hover{
		color: #ba1c1b;
	}
	.unilistitem{
		
	}
	.unilistitem:hover{
		color: #ba1c1b;
	}
</style>